<template>
  <el-container class="main_con"  style="padding-bottom:0px">
    <div class="setting">
      <div class="setting_body">
        <el-form size="medium" label-width="100px" ref="itemForm" :model="obj.configuration" :rules="itemRules">

          <div class="setting_body_item">
            <div class="header">支付宝打款</div>
            <div class="conetnt edit_con">
              <div class="edit_content">   
                <el-form-item label="支付宝打款">
                  <el-radio-group v-model="obj.configuration.ali_remit">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="" v-if="obj.configuration.ali_remit == 1">
                  <div class="fks">
                    打款模板：
                    <el-select v-model="obj.configuration.ali_remit_pay_mode_id" placeholder="请选择" style="width:250px">
                      <el-option
                        v-for="item in tlali"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>
                  
                    <router-link tag="a" target="_blank" to="/setting/pay/payTemplateItem" style="margin-left:10px">
                      <el-button type="text">添加模板</el-button>
                    </router-link>
                  
                    <div style="color:#909399;font-size:12px;">
                      说明：新接口需签约"转账到支付宝账户" , 之前已经签约使用旧接口可以正常打款的无需修改
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </div>

          <div class="setting_body_item">
            <div class="header">微信打款</div>
            <div class="conetnt edit_con">
              <div class="edit_content">   
                <el-form-item label="支付宝支付">
                  <el-radio-group v-model="obj.configuration.wx_remit">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                  </el-radio-group>
                </el-form-item>

                <el-form-item label="" v-if="obj.configuration.wx_remit == 1">
                  <div class="fks">
                    <el-form-item label="公众号模板" style="margin-bottom:22px" prop="wx_remit_wechat_pay_mode_id">
                      <el-select v-model="obj.configuration.wx_remit_wechat_pay_mode_id" placeholder="请选择" style="width:360px">
                        <el-option
                          v-for="item in tlwx"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>
                      <router-link tag="a" target="_blank" to="/setting/pay/payTemplateItem" style="margin-left:10px">
                        <el-button type="text">添加模板</el-button>
                      </router-link>
                    </el-form-item>

                    <el-form-item label="小程序模板" style="margin-bottom:22px" prop="wx_remit_wechata_pay_mode_id">
                      <el-select v-model="obj.configuration.wx_remit_wechata_pay_mode_id" placeholder="请选择" style="width:360px">
                        <el-option
                          v-for="item in tlwx"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          </el-option>
                      </el-select>
                      <el-button type="text" style="margin-left:10px;" @click="refresh">刷新</el-button>
                      <router-link tag="a" target="_blank" to="/setting/pay/payTemplateItem" style="margin-left:10px">
                        <el-button type="text">添加模板</el-button>
                      </router-link>
                    </el-form-item>

                    <el-form-item label="佣金打款" style="margin-bottom:22px">
                      <el-radio-group v-model="obj.configuration.wx_remit_commission">
                        <el-radio :label="1">企业打款</el-radio>
                        <el-radio :label="2">红包打款</el-radio>
                      </el-radio-group>
                      <div style="color:#909399;font-size:12px;">一般 小额打款 可以使用微信红包 建议使用微信打款金额 超过1000</div>
                    </el-form-item>

                    <el-form-item label="提现申请" style="margin-bottom:22px">
                      <el-radio-group v-model="obj.configuration.wx_remit_withdraw">
                        <el-radio :label="1">企业打款</el-radio>
                        <el-radio :label="2">红包打款</el-radio>
                      </el-radio-group>
                      <div style="color:#909399;font-size:12px;">一般 小额打款 可以使用微信红包 建议使用微信打款金额 超过1000</div>
                    </el-form-item>

                    <el-form-item label="提现申请" style="margin-bottom:22px">
                      <el-radio-group v-model="obj.configuration.wx_remit_packet">
                        <el-radio :label="188">188元</el-radio>
                        <el-radio :label="288">288元</el-radio>
                        <el-radio :label="388">388元</el-radio>
                      </el-radio-group>
                      <div style="color:#909399;font-size:12px;line-height:24px;margin-top:10px;">
                        如果选用 红包打款，请选择每个红包最大面值<br/>
                        如果申请额度是500元，选择的是188红包，将会发送两个188红包和一个124红包
                      </div>
                    </el-form-item>

                  </div>
                </el-form-item>
              </div>
            </div>
          </div>

        </el-form>
      </div>
      <div class="setting_bootom">
        <el-button v-has size="medium" type="primary" @click="saveData">保存数据</el-button>
      </div>
    </div>
  </el-container>
</template>

<script>
import {
  addSiteConfig,
  editSiteConfig,
  getSiteConfig
} from '@/api/mall/setting';
import { getPayAll } from '@/api/mall/pay';
export default {
  data(){
    //校验微信打款模板
    let valiDk = (rule, value,callback) => {
      if(this.obj.configuration.wx_remit == 1 && value == ''){
        callback(new Error('打款模板必须选择'));
      }else{
        callback();
      };
    };

    return { 
      tlwx:[],
      tlali:[],
      isLoading:false,
      obj:{
        type:'remitSetting',
        status:1,
        configuration:{
          ali_remit:0,
          ali_remit_pay_mode_id:'',
          wx_remit:0,
          wx_remit_wechat_pay_mode_id:'',
          wx_remit_wechata_pay_mode_id:'',
          wx_remit_commission:1,
          wx_remit_withdraw:1,
          wx_remit_packet:188
        }
      },
      itemRules:{
        wx_remit_wechat_pay_mode_id: [{
          required: true,      
          validator:valiDk
        }],
        wx_remit_wechata_pay_mode_id: [{
          required: true,      
          validator:valiDk
        }]
      }
      
    }
  },
  components: {},
  mounted(){
    //加载支付模板列表
    this.getTemplateAll();
    this.getConfig('remitSetting');
  },
  methods: {
    //刷新模板
    refresh(){
      this.tlwx = [];
      this.tlali = [];
      this.getTemplateAll()
    },
    //获取模板列表(wx/alipay)
    getTemplateAll(){
      this.isLoading = true;
      getPayAll().then(res => {
        this.isLoading = false;
        let l = res.msg;
        //封装微信支付模板列表,mode == 1
        //封装支付宝支付模板列表,mode == 2
        if(l.length){
          l.forEach(e => {
            if(e.mode == 1){
              //wx
              this.tlwx.push({
                label:e.name,
                value:e.id
              })
            }else if(e.mode == 2){
              //ali
              this.tlali.push({
                label:e.name,
                value:e.id
              });
            };
          });
        };
      }).catch(e => {
        this.isLoading = false;
      });
    },
    //获取站点配置数据
    getConfig(type){
      this.isLoading = true;
      getSiteConfig(type).then(res => {
        this.isLoading = false;
        if(res.msg){
          this.obj = res.msg;
        };
      }).catch(e => {
        this.isLoading = false;
      })
    },
    //保存数据
    saveData(){
      this.$refs.itemForm.validate(valid => {
        if(valid){
          this.isLoading = true;
          if(this.obj.update_time){
            //更新
            editSiteConfig(this.obj).then(res => {
              this.isLoading = false;
              this.getConfig('remitSetting');
            }).catch(e => {
              this.isLoading = false;
            });
          }else{
            //新增
            addSiteConfig(this.obj).then(res => {
              this.isLoading = false;
              this.getConfig('remitSetting');
            }).catch(e => {
              this.isLoading = false;
            });
          };
        }else{
          //校验没通过
          return false;
        };
      }); 
    }
  }
}
</script>

<style lang="scss" scoped>
//覆盖样式
.main_con .edit_con .edit_content{
  border-bottom: 0;
}

::v-deep .el-tabs__nav-scroll{
  padding-left: 20px;
}

//灰色框
.fks{
  background: #f4f6f8;
  //width: 500px;
  padding: 20px;
  color: #606266;
}

.setting{
  background: #fff;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);

  .setting_body{
    flex-grow: 1;
    overflow-y: auto;
    //padding-top: 20px;

    .setting_body_item{
      .header{
        background: #e0e3e8;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .setting_bootom{
    height: 60px;
    line-height: 60px;
    border-top: 1px solid #DCDFE6;
  }
}
</style>